<!DOCTYPE html>
<html>
<head>
    <title>四则运算手写体识别</title>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }

        {#button {#}
        {#    width:100px;#}
        {#    height:50px;#}
        {#    background-color:#6e8f51;#}
        {#    border-radius:15px;#}
        {#    border : 0px;#}

        button
        {
            padding: 10px 20px;
            top: 50px;
            left: 50px;
            border: none;
            border-radius: 4px;
            color: #fff;
            font: 16px sans-serif;
            /* set up background gradient and animation */
            background-image: linear-gradient(#36d279, #1d854a);
            background-size: auto 200%;
            background-position: 0 100%;
            transition: background-position 0.5s;
        }
        button:hover
        {
            /* shift background gradient position */
            background-position: 0 0;
            cursor: pointer;
        }

        p
        {
            color: white;
        }
        

        .left
        {
            width:1110px;
            float: left;

        }
        .right
        {
            float: left;
        }

        #result
        {
            color: #ffffff;
            background-color: #000000;
            border: solid 2px black;
            width: 334px;
            height: 176px;
            overflow: scroll;
            scrollbar-face-color: #889B9F;
            scrollbar-shadow-color: #3D5054;
            scrollbar-highlight-color: #C3D6DA;
            scrollbar-3dlight-color: #3D5054;
            scrollbar-darkshadow-color: #85989C;
            scrollbar-track-color: #95A6AA;
            scrollbar-arrow-color: #FFD6DA;
        }

    </style>

    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">

    <script src="../../static/handwriting_calculator/jquery-2.2.4.min.js"></script>


    <script>
        $(function () {
            $("#submit").click(function (event) {
                var box = document.getElementById('box');
                var context = box.getContext('2d');
                var imgData = context.getImageData(0, 0, box.width, box.height).data;
                $.post('get_result', {"img_data": imgData.toLocaleString()}, function (json, textStatus) {
                    {#$("#result").text(json["status"])#}
                    $("#result").append("<p>" + json["status"] + "<\p>");
                });
            })
        });
    </script>

    <script>
        $(function () {
            $("#clear").click(function (event) {
                var box = document.getElementById('box');
                var context = box.getContext('2d');
                context.fillStyle = "#000000";
                context.beginPath();
                context.fillRect(0, 0, box.width, box.height);
                context.closePath();
            })
        });
    </script>
</head>
<body background="../../static/image/background.jpg">

<h1>四则运算手写体识别</h1>


    <div class="left">
        <canvas id="box" width="1000" height="200" style="background: black"></canvas>
        <br>
        <button type="button" class="submit" id="submit">SUBMIT</button>
        <button type="button" class="clear" id="clear">CLEAR</button>


    </div>

    <div class="right">
        <span>历史记录</span>
        <div id="result">

        </div>

    </div>


</body>
<script type="text/javascript">
    var box = document.getElementById('box');
    var oc = box.getContext('2d');

    oc.lineWidth = 4;
    box.onmousedown = function (e) {
        e = e || window.event;
        var ox = e.clientX - box.offsetLeft;
        var oy = e.clientY - box.offsetTop;
        oc.moveTo(ox, oy);
        document.onmousemove = function (e) {
            var ox1 = e.clientX - box.offsetLeft;
            var oy1 = e.clientY - box.offsetTop;
            oc.lineTo(ox1, oy1);
            oc.stroke();
            oc.strokeStyle = 'white';
        };
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
        };
    }
</script>
</html>